<template>
    <div>
        <div id="box"></div>
    </div>
</template>
<script setup>
onMounted(() => {
    var renderer;
    var width, height;

    function initThree() {
        width = document.getElementById("box").clientWidth;
        height = document.getElementById("box").clientHeight;
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });/*生成渲染器对象（属性：抗锯齿效果为设置有效）*/
        renderer.setSize(width, height);
        document.getElementById("box").appendChild(renderer.domElement);
        /*设置canvas背景色(clearColor)和背景色透明度（clearAlpha） */
        // renderer.setClearColor('#002dff',0.6);
        // renderer.setClearColor('rgba(135,206,250,0.5)',1.0);
        renderer.setClearColor('#428bca', 1.0);
    }

    var scene;

    function initScene() {
        scene = new THREE.Scene();
    }




    var camera;

    function initCamera() {
        camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
        //定义camera的位置
        camera.position.set(4, -3, 5);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        //这里的lookAt函数是将视角指定为看原点
        //将camera添加到scene中
        scene.add(camera);
    }

    var light;

    function initLight() {
        light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); //平行光
        light.position.set(100, 100, 200); //设置光源位置
        scene.add(light); //将官员添加到场景
    }



    initThree()
    initScene()
    initCamera()
    initLight()

    //这里是创建一个长方形
    var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
        new THREE.MeshBasicMaterial({
            color: "green",
            wireframe: true //这里指不使用实心材料，所以为true
        })
    );
    //这里要将这个长方形加入这个scene中
    // scene.add(cube);

    //渲染应该使用渲染器，结合相机和场景来得到结果画面。


    let grometry = new THREE.BoxGeometry(1, 1, 1)
    let material = new THREE.MeshBasicMaterial({color: 0x00FF00})
    let grid = new THREE.Mesh(grometry,material)
    scene.add(grid)
    // renderer.render(scene, camera);
    const axesHelper = new THREE.AxisHelper(5)
    scene.add(axesHelper)
    function animtae(){
        // requestAnimationFrame(animtae)
        grid.rotation.x += 0.01
        grid.rotation.y += 0.01
        renderer.render(scene, camera);
    }
    animtae()
})
</script>
<style>
* {
    padding: 0;
    margin: 0;
}

canvas {
    width: 800px;
    height: 300px;
}

#box {
    width: 800px;
    height: 300px;
}
</style>
